<template>
  <div>
    <div class="title">{{ userNickname }}的关注 ({{ followsInfo.length }})</div>

    <div class="followsList">
      <div class="followBox" v-for="user in followsInfo" :key="user.id">
        <div class="avatarUrl">
          <el-image
            style="width: 100px; height: 100px"
            :src="user.avatarUrl"
            fit="fill"
            @click="toUserDetailPage(user.userId, user.nickname)"
          ></el-image>
        </div>

        <div>
          <div class="nickname">{{ user.nickname }}</div>
          <div class="signature" v-if="user.signature == null">&#12288;</div>
          <div class="signature" v-else>{{ user.signature }}</div>
          <div>
            <span class="playlistCount">歌单：{{ user.playlistCount }}</span>
            |
            <span class="followeds">粉丝：{{ user.followeds }}</span>
          </div>
        </div>

        <div class="privateLetters" v-if="userId == theFollowsUserId">
          <i class="el-icon-message"></i> 私信
        </div>
        <div class="follow" v-if="userId != theFollowsUserId && !user.followed">
          <i class="el-icon-plus"></i> 关注
        </div>
        <div class="follow" v-if="userId != theFollowsUserId && user.followed">
          已关注
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {
      // 关注列表信息
      followsInfo: [],
      // 用户昵称
      userNickname: '',
    }
  },
  computed: {
    ...mapState(['userId', 'theFollowsUserId']),
  },
  created() {
    this.getUserDetail()
    this.getFollowsList()
    this.routerIsActiveInfo()
  },
  methods: {
    ...mapMutations([
      'changePath',
      'changeIsActive',
      'changeIsMyself',
      'changeTheDetailUserId',
      'changeTheDetailUserName',
    ]),

    routerIsActiveInfo() {
      const isActive = ''
      this.changeIsActive(isActive)
    },
    // 获取用户详情
    async getUserDetail() {
      const { data: res } = await this.$http({
        url: `/user/detail?uid=${this.theFollowsUserId}`,
        withCredentials: true, //关键
      })
      // console.log(res)
      this.userNickname = res.profile.nickname
    },
    //   获取关注列表
    async getFollowsList() {
      // console.log(this.data)
      const { data: res } = await this.$http({
        url: `/user/follows?uid=${this.theFollowsUserId}`,
        withCredentials: true, //关键
      })
      // console.log(res)
      this.getFollowsAboutInfo(res.follow)
    },
    // 提取关注页面相关信息
    getFollowsAboutInfo(list) {
      let tmepListDatas = []

      list.map((item) => {
        let listObj = {}

        /**
         * 用户id userId
         * 昵称 nickname
         * 是否关注 followed
         * 个性签名 signature
         * 粉丝 followeds
         * 用户头像 avatarUrl
         * 歌单数量 playlistCount
         */
        listObj.userId = item.userId
        listObj.nickname = item.nickname
        listObj.followed = item.followed
        listObj.signature = item.signature
        listObj.followeds = item.followeds
        listObj.avatarUrl = item.avatarUrl
        listObj.playlistCount = item.playlistCount

        return tmepListDatas.push(listObj)
      })

      this.followsInfo = tmepListDatas
      // console.log(this.followsInfo)
    },
    // 跳转到个人信息页面
    toUserDetailPage(followUserId, username) {
      const info = {
        path: '/view/userdetail',
        isMyself: this.userId == followUserId,
        theDetailUserId: followUserId,
        theDetailUserName: username,
      }

      this.changePath(info.path)
      this.changeIsMyself(info.isMyself)
      this.changeTheDetailUserId(info.theDetailUserId)
      this.changeTheDetailUserName(info.theDetailUserName)

      this.$emit('getUserDetailInfo')
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  font-size: 22px;
  font-weight: 600;
  padding: 24px;
}

.followsList {
  display: flex;
  flex-wrap: wrap;
}

.followBox {
  width: 480px;
  display: flex;
  margin-bottom: 18px;
}

.avatarUrl {
  padding: 0 16px;
  > .el-image {
    border-radius: 50%;
    cursor: pointer;
  }
}

.signature {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nickname {
  font-size: 18px;
  padding: 8px 0;
}

.signature {
  font-size: 14px;
  color: #656565;
  margin-bottom: 2px;
}

.playlistCount {
  font-size: 14px;
  color: #656565;
  padding-right: 12px;
}

.followeds {
  font-size: 14px;
  color: #656565;
  padding-left: 12px;
}

.privateLetters {
  border: 1px solid #c0b7b7;
  padding: 2px 12px;
  height: 20px;
  border-radius: 20px;
  position: relative;
  top: 32px;
  font-size: 14px;
  color: #656565;
  margin-left: 18px;
}
.follow {
  border: 1px solid #c0b7b7;
  padding: 2px 12px;
  height: 20px;
  border-radius: 20px;
  position: relative;
  top: 32px;
  font-size: 14px;
  color: #656565;
  margin-left: 18px;
  i {
    color: #ec4141;
  }
}
</style>